@import '@/assets/sass/mixin.scss';
@import '@/assets/sass/var.scss';

body {
    color: $default-color;
    font-family: $default-font-family;
}

/*#region 环境标识*/
.milieu-tag {
    position: relative;

    &:before {
        content: '';
        position: absolute;
        color: $default-hint-color;
        top: -12px;
        right: 0;
    }
}

.dev-tag {
    &:before {
        content: 'dev';
    }
}

.image-tag {
    &:before {
        content: 'image';
    }
}

.test-tag {
    &:before {
        content: 'test';
    }
}

.prod-tag {
    display: none
}

/*#endregion*/

/*#region 盒模型*/
/*主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上*/
// flex-direction: row | row-reverse | column | column-reverse;

/*换行：不换行（默认） | 换行 | 换行并第一行在下方*/
// flex-wrap: nowrap | wrap | wrap-reverse;

/*主轴方向和换行简写*/
// flex-flow: <flex-direction> || <flex-wrap>;

/*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
// justify-content: flex-start | flex-end | center | space-between | space-around;

/*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
// align-items: flex-start | flex-end | center | baseline | stretch;

/*多主轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
// align-content: flex-start | flex-end | center | space-between | space-around | stretch;

.box-row {
    @include box-display(row);
}

.box-column {
    @include box-display(column);
}

//box-flex1到box-flex17
@for $i from 1 through 17 {
    .box-flex#{$i} {
        @include box-flex($i);
    }
}

.box-center {
    @include box-align(center, center);
}

.box-center-end {
    @include box-align(center, flex-end);
}

.box-center-start {
    @include box-align(center, flex-start);
}

.box-start-center {
    @include box-align(flex-start, center);
}

.box-center-between {
    @include box-align(center, space-between);
}

.box-start-between {
    @include box-align(start, space-between);
}

.box-flex-wrap {
    flex-wrap: wrap;
}

/*#endregion*/

/*#region 背景图片*/

/*
    背景图片自适应，不平铺，居中
    background-size:contain
    background-repeat: no-repeat
    background-position: center
*/
.bg-contain {
    @include bg(contain);
}

/*
    背景图片自动，不平铺，居中
    background-size:auto
    background-repeat: no-repeat
    background-position: center
*/
.bg-auto {
    @include bg(auto);
}

/*
    背景图片剪切，不平铺，居中
    background-size:cover
    background-repeat: no-repeat
    background-position: center
*/
.bg-cover {
    @include bg(cover);
}

/*
    背景图片铺满，不平铺，居中
    background-size:100% 100%
    background-repeat: no-repeat
    background-position: center
*/
.bg-100 {
    @include bg(100% 100%);
}

/*
    背景图片自适应，不平铺，靠左居中
    background-size:contain
    background-repeat: no-repeat
    background-position: left center
*/
.bg-left {
    @include bg(contain, left center);
}

.bg-left-top {
    @include bg(contain, left top);
}

/*#endregion*/

/*#region 文字*/
.pointer {
    cursor: pointer;
}

.overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptb_10 {
    padding: 10px 0;
}

.pt_10 {
    padding-top: 10px;
}

.fz_14 {
    font-size: 14px;
}

.fz_20 {
    font-size: 20px;
}

.red {
    color: red;
}

.gray {
    color: gray;
}

.green {
    color: green;
}

.tc {
    text-align: center;
}

.tr {
    text-align: right;
}

/*#endregion*/

/*#region 默认容器*/

.table {
    position: relative;

    .vxe-grid {
        position: absolute;
        width: 100%;
    }
}

//视图容器
.container-grid,
.container-panel {
    @extend .box-flex1;
    padding: 5px 15px 15px 15px;
    background-color: #e4e7ed;

    .header-search-el {
        margin: 10px 0 5px 0;
        background-color: #f6f8f8;
        width: calc(100% - 20px);
        padding: 10px;
        border: 1px solid #e8eaec;

        .el-form-item {
            margin: 0 10px 0 0;
        }
    }

    .pagination-el {
        background-color: #fff;
        padding: 10px;
    }

    .info-el {
        background-color: #fff;
        margin: 5px 0;
        padding: 10px;
    }

    .sum-el {
        .title {
            padding: 5px 0;
        }

        .item-el {
            padding: 0 30px;
        }

        .line-el {
            position: relative;

            &:before {
                content: '';
                position: absolute;
                right: 0;
                top: 8px;
                width: 1px;
                height: calc(100% - 10px);
                background-color: #e8eaec;
            }
        }
    }
}

.container-panel {
    width: calc(100% - 30px);
    height: 100%;

    .header-search-el {
        padding-bottom: 10px;
    }

    //左侧树面板
    .tree-panel {
        background-color: $container-background-color;
        border: 1px solid #e8eaec;
        width: 300px;
        position: relative;
        height: calc(100% - 12px);
        margin: 10px 16px 10px 0;

        .title {
            background-color: #f6f8f8;
            height: 55px;
            line-height: 55px;
            padding-left: 10px;
            border-bottom: 1px solid #e8eaec;
        }

        .el-tree {
            height: calc(100% - 57px);
            overflow: auto;

            .el-tree-node-label {
                font-size: $default-font-size;
            }
        }

        //树形数据被选中时
        .is-current {
            &>.el-tree-node__content {
                color: $navigation-active-font-color;
                background-color: $navigation-popup-hover-background-color;
            }
        }
    }

    //右侧容器面板
    .panel-el {
        @extend .box-column, .box-flex1;
        height: 100%;
        align-content: start;
        background-color: #e4e7ed;
    }
}

.container-info {
    padding: 15px;
    background-color: #e4e7ed;

    &>div:not(.dialog) {
        background-color: #fff;
        padding: 20px;
        margin-bottom: 10px;

        .title {
            padding-bottom: 20px;
        }
    }

    .title {
        padding-bottom: 20px;
    }
}

.tree-no-line {
    .el-tree.el-tree {
        .el-tree-node {

            //如果节点没有子节点，延长层级指示线
            .el-tree-node__expand-icon.is-leaf {
                &:before {
                    border-top: 1px dashed transparent;
                }
            }

            &:before {
                border-left: 1px dashed transparent;
            }

            &:after {
                border-top: 1px dashed transparent;
            }

            .el-tree-node__content {
                padding: 5px 0;
            }
        }
    }
}

.scroll-el {
    padding-bottom: 70px;

    .toobar {
        position: absolute;
        bottom: 5px;
        right: 7px;
        margin: 0 25px;
        z-index: 10;
        padding: 10px;
    }
}

.full-dialog,
.dialog {
    .el-dialog {
        .el-dialog__header {
            padding: 20px 10px 20px 20px;
            border-bottom: 1px solid #e8eaec;
        }

        .el-dialog__footer {
            padding: 10px;
            border-top: 1px solid #e8eaec;
        }
    }
}

.dialog {
    .el-dialog {
        width: min-content;
    }

    .form {
        .el-form-item:not(.big-el) {
            .el-form-item__content {
                width: 380px;

                &>div,
                .el-select {
                    width: 100%;
                }
            }
        }

        .big-select {
            .el-select:not(:last-child) {
                .el-input__inner {
                    border-right: 0;
                }
            }

            .el-select:first-child {
                .el-input__inner {
                    border-radius: 4px 0 0 4px;
                }
            }

            .el-select+.el-select {
                .el-input__inner {
                    border-radius: 0 4px 4px 0;
                }
            }
        }

        .filtErr {
            margin: 0
        }
    }
}

.full-dialog {
    .el-dialog {
        @extend .box-column;

        .el-dialog__body {
            @extend .box-flex1;
        }
    }
}

.panel-form .el-form {
    .el-form-item {
        .el-form-item__content {
            width: 300px;

            &>div {
                width: 100%;
            }
        }
    }

    .bg-item {
        width: 100%;

        .el-form-item {
            @include box-display(row);
            width: 100%;
        }

        .el-form-item__content {
            @include box-flex(1);
        }

        .el-form-item__content {
            .el-textarea {
                width: 80%;
            }
        }
    }

    .is-disabled {

        .el-input__inner,
        .el-textarea__inner {
            background-color: transparent;
            color: #606266;
            border: 0;
        }

        .el-input__suffix {
            visibility: hidden;
        }

        .el-textarea__inner {
            padding-top: 10px;
        }
    }

    .rate-el {
        .el-form-item__content {
            padding-top: 11px;
        }
    }
}

/*#endregion*/

/*#region 按钮*/
.el-button {
    padding: 10px 12px;
    color: $default-color;
}

//查询 btn-blue
@include button($ui: 'blue', $background-color: $button-blue-background-color);
//重写默认primary样式同btn-blue
@include button($ui: 'el-button--primary',
    $default: true,
    $background-color: $button-blue-background-color);

//确定 btn-confirm
@include button($ui: 'confirm',
    $background-color: $button-confirm-background-color);

//设置按钮 btn-site
@include button($ui: 'site',
    $background-color: transparent,
    $background-color-disabled: transparent,
    $color-disabled: $default-placeholder-color,
    $color: $button-site-color,
    $padding: 10px 5px);

//清空按钮 btn-clear
@include button($ui: 'clear',
    $background-color: transparent,
    $border-width: 1px,
    $color: $button-clear-color,
    $border-color: $button-clear-border-color);

//无背景按钮 btn-text
@include button($ui: 'text',
    $color: $default-color,
    $background-color: transparent);

//链接按钮 btn-link
@include button($ui: 'link',
    $color: $default-hint-color,
    $background-color: transparent);

//折叠按钮 btn-contractility
@include button($ui: 'contractility',
    $background-color: $button-contractility-background-color,
    $padding: 0);

/*#endregion*/

.upload-drag {
    border: 0;

    .el-upload.el-upload {
        width: 100%;
        height: auto;
        line-height: initial;
        background-color: rgba(0, 0, 0, 0.02);
        border: 1px dashed rgba(0, 0, 0, 0.15);
        border-radius: 4px;

        .el-upload-dragger {
            padding: 30px 0 15px 0;
            width: 100%;
            background-color: inherit;
            border: 0;
        }
    }

    .el-upload-list {
        width: auto;

        .el-icon-document {
            color: transparent;

            &:before {
                @extend .bg-contain;
                background-image: url(~@/assets/images/icon_file.png);
            }
        }
    }

    .img-file {
        background-image: url(~@/assets/images/file.png);
        width: 45px;
        height: 57px;
        margin: 0 auto;
    }

    .text {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        padding: 12px 0 10px 0;
        line-height: 14px;
    }

    .tip {
        font-size: 12px;
        line-height: 12px;
        color: rgba(0, 0, 0, 0.45);
    }
}

.tooltip-el {
    .el-tooltip {
        margin-left: 10px;
    }
}

.tip-label-el {
    .el-form-item__label-wrap {
        @extend .box-row;
    }
}